<!--  @author:ymy  -->
<template>
  <div class="graphic">
    <pro-title :title="title" />
    <div class="content">
      <a href="" class="item" v-for="item in graphic" :key="item.id">
        <div class="item-img">
          <img :src="'https://ss.lanqb.com/' + item.imgCover" alt="" />
        </div>
        <div class="item-text">
          <h4>{{ item.title }}</h4>
          <p>老师：{{ item.user_profile.nickname }}</p>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import ProTitle from '../ProTitle';
export default {
  name: 'Graphic',
  data() {
    return {
      title: '图文教程',
    };
  },
  props: ['graphic'],
  components: {
    ProTitle,
  },
};
</script>
<style lang="less" scoped>
.graphic {
  margin-top: 0.1rem;
  height: 3.54rem;
  background-color: white;
  > .content {
    padding-left: 0.1rem;
    > .item {
      display: flex;
      height: 1.07rem;
      justify-content: left;
      text-align: center;
      border-bottom: 1px solid #e6e6e6;
      > .item-img {
        img {
          margin-top: 0.1rem;
          width: 1.15rem;
          height: 0.86rem;
        }
      }
      > .item-text {
        width: 2.175rem;
        height: 0.855rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.1rem;
        margin-top: 0.1rem;
        h4 {
          font-size: 0.16rem;
          color: black;
          font-weight: normal;
        }
        p {
          font-size: 0.13rem;
          color: #a4a4a4;
        }
      }
    }
    > .item:last-child {
      border-bottom: none;
    }
  }
}
</style>
